<template>
	<view class="login">
		<view class="text">
			<text>您好，</text>
			<br />
			<text>欢迎来到家用充电桩助手</text>
			<br />
			<text class="english">Hellow，Welcome to the home charging pile Assistant</text>
		</view>
		<view class="account">
			<image :src="loginBgc" alt="">
			 <input style="margin-top: 340rpx;" class="input" v-model="phone" type="number"  @input = "input" maxlength="11" placeholder="请输入手机号">
			 <view>
			 	<input v-model="validCode" class="input" type="text" maxlength="5" placeholder="验证码">
				<text @click="getValidCode" v-if="showGetValidCode">{{num}}</text>
				<text v-else style="color: #999999;">{{num}}秒后重新获取</text>
			 </view>
		</view>
		<view class="btn" @click="postLogin">
			登录
		</view>
	</view>
</template>

<script>
	import loginBgc from "../../static/loginBgc.png"
	import { login, sendMsg } from "./indexServ.js"
	export default {
		name: 'login',
		onLoad(option) {
			this.fromRoute = option.fromRoute
		},
		data() {
			return {
				loginBgc,
				validCode:'',
				phone:"",
				fromRoute:'',
				num:'获取验证码',
				showGetValidCode:true
			}
		},
		mounted(){
			// this.input()
		},
		methods: {
			async getValidCode(){
				await sendMsg({
					phone: this.phone
				}).then((res) => {
					if(res.code==="0000000"){
						this.$u.toast("获取验证码成功")
						this.showGetValidCode = false
						this.num = 60
						let self = this
						this.timeInterval = setInterval(function() {
							self.num--
						  if(self.num===0){
							  self.showGetValidCode = true
							  self.num = '获取验证码'
							  clearInterval(self.timeInterval);
						  }
						}, 1000)
					}else{
						this.$u.toast(res.message)
					}
				})
			},
			input(e){
				var reg=/\d/
				//判断是否含有数字
				if(reg.test(e.detail.value)){
					setTimeout(()=>{
						this.phone = e.detail.value.match(/\d+/g).join('');
					},0)
					
				}else{
					setTimeout(()=>{
						this.phone = "";
					},0)
				}
			},
			async postLogin() {
				let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
				if(this.phone==="" || !reg.test(this.phone)){
					this.$u.toast("请填写正确的手机号")
					return
				}else if(this.validCode===""){
					this.$u.toast("请输入验证码")
					return
				}
				await login({
					validCode: this.validCode,
					phone: this.phone
				}).then((res)=>{
					if(res.code==="0000000"){
						const token = "Bearer " + res.body.token
						getApp().globalData.authorizationBar = token
						uni.setStorageSync('authorizationBar',token);
						if(this.fromRoute){
							uni.redirectTo({
								url: "/" + this.fromRoute
							})
							//跳转tabar需要使用这个方法
							uni.switchTab({
								url: "/" + this.fromRoute
							});
						}else{
							uni.switchTab({
								url: '/pages/chargeList/index'
							});
						}
					}else{
						this.$u.toast(res.message)
					}
				}).catch(()=>{
					
				})
			},
		}
	}
</script>

<style  lang="scss" scoped>
.login{
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
	
	.text{
		height: 164*2rpx;
		font-size: 24*2rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		width: 100vw;
		line-height: 33*2rpx;
		padding: 28*2rpx 0 0 32*2rpx;
		
		.english{
			font-size: 12*2rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
	.btn{
		width: 320*2rpx;
		height: 52*2rpx;
		background: #3ADEA2;
		box-shadow: 0*2rpx 6*2rpx 10*2rpx 0*2rpx rgba(0,0,0,0.1);
		border-radius: 26*2rpx;
		font-size: 18*2rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 52*2rpx;
		position: absolute;
		z-index: 10;
		bottom: 122rpx;
		text-align: center;
		left: 50%;
		transform: translateX(-50%);
	}
	.account{
		width: 100%;
		height: calc(100vh - 164*2rpx);
		flex-grow: 1;
		background-size: 100% auto;
		position: relative;
		image{
			position: absolute;
			z-index: 6;
			left: 0;
			right: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
		}
		.input{
			position: relative;
			width: 320*2rpx;
			height: 52*2rpx;
			background: #FFFFFF;
			border-radius: 26*2rpx;
			margin: 0 auto;
			padding-left: 20*2rpx;
			margin-bottom: 12*2rpx;
			box-sizing:border-box;
			z-index: 7;
		}
		view{
			width: 320*2rpx;
			margin: 0 auto;
			position: relative;
			z-index: 7;
			text{
				position:absolute;
				z-index: 20;
				right: 20*2rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 16*2rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1A8DFF;
			}
		}
		
	}
}
</style>